<template>
  <div class="container container1">
      <div class="row clearfix row1">
        <div class="col-md-12 column">
          <form class="form-horizontal formLogin" role="form">
              <div class="form_wrap">
                <div class="tip_info" style="text-align:center;">
                    <span style="color:#ccc;transform: translate(0%,-50%);display: inline-block;font-size: 20px;">银行柜面系统</span>
                  </div>
                  <div class="form-group" style="    margin-top: 10px;">
                    <label for="inputEmail3" class="col-sm-2 control-label">柜员号</label>
                    <div class="col-sm-10">
                      <input type="input" class="form-control" id="inputEmail3" v-model="empInfoVo.empId" placeholder="请输入柜员编号" oninput = "value=value.replace(/[^\d]/g,'')"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" v-model="empInfoVo.password" placeholder="请输入密码"/>
                    </div>
                  </div>
                  <div class="form-group" style="margin-left: -11%;padding-bottom: 10%;">
                    <select v-model="authorityId">
                      <option v-for="authority in authoritys" v-bind:value="authority.roleId">
                        {{ authority.roleName }}
                      </option>
                    </select>
                    <button @click.prevent="login" class="btn btn-default btn-login" style="padding: 4px 31px;margin-top: -6px;margin-left: 24%;">签到</button>
                  </div>
              </div>
          </form>
        </div>
      </div>
  </div>
</template>

<script>
import Qs from 'qs'
export default {
  name: 'BkSysEmpLogin',
  data () {
    return {
      empInfoVo: { empId: '', password: ''},
      responseResult: [],
      authorityId:"0",
      authoritys:[
        {roleId:0,roleName:"角色权限"}
      ]
    }
  },
  mounted: function (){//页面加载向后台发送数据还有create也是页面一加载就可以进行发送请求的
      this.getRoleList();
      clearInterval(this.timer);
  },
  methods: {
    login () {//登陆
      var data = Qs.stringify({"empId":this.empInfoVo.empId,"password":this.empInfoVo.password,"url":"/bk-employee/ssoLogin","authorityId":this.authorityId});
      if(this.empInfoVo.empId===""||this.empInfoVo.empId===null){
          this.$message.error("柜员编号不能为空");
      }else if(this.empInfoVo.password===""||this.empInfoVo.empId===null){
          this.$message.error("密码不能为空");
      }else if(this.authorityId==="0"){
          this.$message.error("请选择角色");
      }else{
          this.$axios
          .post('/bk-employee/ssoLogin',
                data,
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
          )
          .then(result => {
            if (result.data.code === 200) {
							//获取并存储服务器返回的AuthorizationToken信息
              var authorization=result.data.data[0];
              console.log(authorization);
              localStorage.setItem('Authorization',authorization);
              this.$message.success('签到成功');
							//登录成功跳转页面
              this.$router.push({path: '/index'})
            }else{
              //success,error,info,warning
              this.$message.error('柜员号或密码错误');
            }
          })
          .catch(failResponse => {
            
          })
      }
    },
    getRoleList: function () {
        this.$axios
        .get('/bk-role/getAllRoleList',
              {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
        .then(result => {
           for(var i=0;i<result.data.data.length;i++){
             this.authoritys.push(
                result.data.data[i]
            );
           }
        })
        .catch(failResponse => {})
    },
  }
}
</script>
<style>
    body,html,.container1{
        width:100%;
        height:100%;
        background: url('/loginImg/bg.png') no-repeat;/*利用nginx做跳板查找本地图片*/
        /* ../../../static/img/login/bg.png    '/loginImg/bg.png'*/
        background-size: 100%;
    }
    .row1{/*垂直居中*/
        transform: translate(0%,-50%);
        position: relative;
        top: 50%;
    }
    .formLogin{
        transform: translate(50%,0%);
        width:50%;
        padding: 2% 12% 2% 12%;
    }
    .control-label{
        padding-right: 0;
        padding-left: 0;
    }
    .form_wrap{
        background: #f3f6f8;
        border-radius: 5px 5px;
    }
    .tip_info{
        background: white;
        padding-top: 12%;
        border-radius: 5px 5px 0 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: -1px !important;
        margin-bottom: 5%;
        padding-bottom: 13px;
    }
    .form-group{
        margin-top: 10%;
        margin-right: 7% !important;
        padding-left: 10%;
    }
    .authority{
        width: 50%;
    }
    .btn-login:hover{
        background: lightseagreen;
    }
    select{
        width: 28%;
        margin-left: 14%;
        padding: 5px;
        border-radius: 5px;
    }
       
</style>
